<template>
  <div>
    <div style="line-height: 50px;
                font-weight: 700;
                color: #2a2727;
                padding-left: 25px">
      找到{{total}}个歌单
    </div>
    <div class="song-list">
      <div v-for="(item, index) in songList"
           :key="index"
           class="itemInfo"
           @click="goDetail(item)"
      >
        <img v-lazy="item.coverImgUrl" alt="">
        <div class="playCount">
          <img class="play-m" src="~@/assets/img/home/play-m.svg" alt="" >
          <div>{{ (item.playCount/10000).toFixed()}}</div>
          <span>万</span>
        </div>
        <div class="big-play">
          <img src="~@/assets/img/home/play-m.svg" alt="">
        </div>
        <p>{{item.name}}</p>
      </div>
    </div>
    <!--      分页按钮-->
    <div style="width: 100%">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="30"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {home} from "@/network/home";

  export default {
    name: "SearchSongList",
    data(){
      return{
        key:this.$route.params.data,  //当前搜索词
        songList:[], //请求的专辑数据
        total:0,        //专辑数量
        currentPage: 0, //当前页
      }
    },
    created() {
      //获取搜索数据
      this.getSearch(this.key)
    },
    watch:{
      //监听搜索数据是否改变，若改变请求新的数据渲染（好像监听不到key改变,只能用"$route.params.data"）
      "$route.params.data"(){
        this.getSearch(this.$route.params.data)
      },
    },
    methods:{
      //跳转到歌单详情页
      goDetail(item){
        this.$router.push('/songlist/detail/id=' + item.id)
      },
      //点击分页切换页数的函数
      handleCurrentChange(newPage){
        this.currentPage = newPage - 1
        this.getSearch(this.key,this.currentPage * 30)
      },
      //获取搜索数据的函数
      getSearch(key, offset){
        home.getSearch(key, 1000, offset).then(res => {
          this.songList = res.data.result.playlists
          this.total = res.data.result.playlistCount
          console.log(res);
        })
      },
    },
  }
</script>

<style scoped>
.song-list{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  /*这是歌单详情路由的父组件，此代码防止两个组件的滚动条冲突，*/
  overflow-y: hidden;
}
.itemInfo{
  width: 17%;
  margin-bottom: 10px;
  position: relative;
}
.itemInfo img:nth-child(1){
  width: 100%;
  border-radius: 7px;
  cursor: pointer;
}
.itemInfo p{
  font-size: 14px;
  color: rgb(92, 81, 81);
  line-height: 20px;
  margin-top: -24px;
  margin-bottom: 4px;
}
.playCount{
  position: absolute;
  top: 5px;
  right: 10px;
  display: flex;
  font-size: 12px;
  color: white;
}
.playCount div{}
.play-m{
  position: relative;
  top: -3px;
  width: 20px;
  height: 20px;
}
.big-play{
  width: 27px;
  height: 27px;
  position: relative;
  top: -38px;
  left: 126px;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0;
  transition: all .8s;
}
.itemInfo:hover .big-play{
  opacity: 1;
}
.big-play{
  background-color: #e85252;
}
/*分页按钮样式*/
/deep/ .el-pagination{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #e54c60;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #6481d9;
}

</style>
